<template>
	<view>
		<view class="padding">
			<custom-input v-model="keyword" holder="开始寻找你梦寐以求的公司..."></custom-input>
		</view>
		<view class="padding flex justify-between">
			热门企业
			<text class="text-orange text-sm">查看更多</text>
		</view>
		
		<scroll-view scroll-x >
			<view class="padding flex">
				<company-job 
					small 
					v-for="item in popular"
					:key="item.objectId"
					:data="{company:item}"
					@click="handleDetail(item.objectId)"
				/>
			</view>
		</scroll-view>
		
		<view class="padding flex justify-between">
			最新企业
			<text class="text-orange text-sm">查看更多</text>
		</view>
		<custom-empty v-if="list.length==0"/>
		<view class="padding">
			<company-job 
				v-for="item in list" 
				:key="item.objectId"
				:data="{company:item}"
				@click="handleDetail(item.objectId)"
			/>
		</view>
		
	</view>
</template>

<script setup lang="ts">
import { ref, type Ref,watch } from 'vue';
import {ID,KEY,BASE} from '../../config/index'
import http from '../../utils/http'
import type {CompanyType} from '../../model/company'
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';

// 横向列表渲染
const popular = ref<Array<CompanyType>>([])
let skip = Math.floor(Math.random()*15 + 5)
http.get('/classes/company',{
	params:{
		limit:6,
		skip
	}
}).then(res=>{popular.value = res.data.results})

// 长列表渲染
const list = ref<Array<CompanyType>>([])
http.get('/classes/company',{params:{limit:10}}).then(res=>{
	console.log('三方库',res);
	list.value = res.data.results
})

//触底分页
let page = 1
onReachBottom(()=>{
	console.log('触底了');
	let skip = page*10
	http.get('/classes/company',{
		params:{limit:10,skip},
	}).then(res=>{
		let results = res.data.results
		if(results.length!=0){
			list.value = [
				...list.value, //原数据
				...results  //新数据
			]
			page++
			return
		}
		uni.showToast({
			title:'没有更多数据了',
			icon:'none'
		})
		
	})
})


//下拉刷新
onPullDownRefresh(()=>{
	console.log('下拉刷新');
	let skip = Math.floor(Math.random()*15 + 5)
	http.get('/classes/company',{
		params:{
			limit:6,
			skip
		}
	}).then(res=>{
		popular.value = res.data.results
		uni.stopPullDownRefresh() //主动关闭刷新动画
	})
})

// 搜索功能
const keyword:Ref<string> = ref('字节')
watch(keyword,()=>{
	console.log('公司页面',keyword.value);
	page = 1
	http.get('/classes/company',{
		params:{
			where:{
				// 'company_name':keyword.value, //精准匹配
				'introduction':{"$regex":keyword.value}   //模糊匹配、正则匹配
			},
		},
	}).then(res=>{
		console.log('三方库',res);
		list.value = res.data.results
	})
})

//跳转详情
const handleDetail = (id:string)=>{
	uni.navigateTo({
		url:`/pages/company/detail?id=${id}`
	})
}

</script>

<style>
page{
	background-color: #fff;
}       
</style>
